function butListClick() {   // 列表
    number = number+1
    order_num = order_num+1
    custom.push({number:number,order_num:order_num,type:2})
    for(let index in custom){
        if(custom[index].number == number){
            custom[index].ionrange_1 = 0
            custom[index].ionrange_2 = 50
            custom[index].ionrange_3 = 120
            custom[index].ionrange_4 = 0
            custom[index].img = []
            var imgList1 = {imgNumber:1,imgeSrc:'',urlType:0,urlId:0,urlTitle:''}
            var imgList2 = {imgNumber:2,imgeSrc:'',urlType:0,urlId:0,urlTitle:''}
            custom[index].img.push(imgList1)
            custom[index].img.push(imgList2)
        }
    }
    var html = ' <div class="form-group draggable dropped ui-draggable" id="dropped_'+number+'" data-number="'+number+'">\n' +
        '   <div class="giftCard">\n' +
        '                                            <img style="width:50%; height: 120px; cursor: pointer" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2727869584,4075643637&fm=26&gp=0.jpg" alt="">\n' +
        '                                            <img style="width:50%; height: 120px; cursor: pointer" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2727869584,4075643637&fm=26&gp=0.jpg" alt="">\n' +
        '                                        </div>\n' +
        '        </div>'
    var img = $('#field_image').html()
    //隐藏所有
    $('#sortable_leve').find('div[class="level_number"]').css("display","none")
    var level = '<div class="level_number" style="width: 90%; position: relative" id="level_'+number+'" data-number="'+number+'">\n' +
        '<i style="position: absolute;right:-70px; top:-9px;font-size: 25px; cursor: pointer" class="fa fa-times LunboListClick"></i>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>上边距</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_1" data-number="'+number+'" ></div>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>宽度调试</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_2" data-number="'+number+'" ></div>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>高度调试</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_3" data-number="'+number+'"></div>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>圆角</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_4" data-number="'+number+'" ></div>\n' +
        '                            <divid="level_numberBox_'+number+'">\n' +
        '<div style="background: #f8f8f8;padding: 10px;border-radius: 10px; margin: 20px 0" class="form-group  row additional">\n' +
        '<div class=" col-sm-4" style="margin-top:.5em;">\n' +
        '      <img src="" onerror="this.src=\'./resource/images/nopic.jpg\'; this.title=\'图片未找到.\'" class="img-responsive img-thumbnail" width="150">\n' +
        '    </div>\n' +
        '<div class="col-sm-8">\n' +
        '                                <div style="margin-bottom: 20px;position: relative;" class="input-group m-b">\n' +
        '                                    <input style="flex:3" type="text" id="bannerUrl_'+number+'_'+1+'" value="" class="form-control" readonly>\n' +
        '                                    <span style="flex:1" class="input-group-btn"> <button type="button" class="btn btn-default" data-imgNumber="'+1+'" data-number="'+number+'" onclick="bannerUrlClick($(this))">选择链接</button> </span>\n' +
        '                                </div>\n' +
        '                              '+img+'      \n' +
        '                            </div>\n' +
        '                            <div class="hr-line-dashed"></div></div>\n' +
        '<div style="background: #f8f8f8;padding: 10px;border-radius: 10px" class="form-group  row additional">\n' +
        '<div class=" col-sm-4" style="margin-top:.5em;">\n' +
        '      <img src="" onerror="this.src=\'./resource/images/nopic.jpg\'; this.title=\'图片未找到.\'" class="img-responsive img-thumbnail" width="150">\n' +
        '    </div>\n' +
        '<div class="col-sm-8">\n' +
        '                                <div style="margin-bottom: 20px;position: relative;" class="input-group m-b">\n' +
        '                                    <input style="flex:3" type="text" id="bannerUrl_'+number+'_'+2+'" value="" class="form-control" readonly>\n' +
        '                                    <span style="flex:1" class="input-group-btn"> <button type="button" class="btn btn-default" data-imgNumber="'+2+'" data-number="'+number+'" onclick="bannerUrlClick($(this))">选择链接</button> </span>\n' +
        '                                </div>\n' +
        '                              '+img+'      \n' +
        '                            </div>\n' +
        '                            <div class="hr-line-dashed"></div></div>\n' +
        '                            </div>\n' +
        '                        </div>'

    $('#sortable').append(html);
    $('#sortable_leve').append(level);

    $(".ionrange_1").ionRangeSlider({
        min: 0,
        max: 100,
        type: "single",
        step: 1,
        postfix: "px",
        prettify: false,
        hasGrid: true,
        from: 0,
        onChange:function (obj) {
            $("#dropped_"+obj.input.context.dataset.number+"").find("img").css("margin-top",obj.fromNumber)
            for(let index in custom){
                if(custom[index].number == obj.input.context.dataset.number){
                    custom[index].ionrange_1 = obj.fromNumber
                }
            }

        }
    });
    $(".ionrange_2").ionRangeSlider({
        min: 0,
        max: 50,
        type: "single",
        step: 1,
        postfix: "%",
        prettify: false,
        hasGrid: true,
        from: 50,
        onChange:function (obj) {
            $("#dropped_"+obj.input.context.dataset.number+"").find("img").css("width",obj.fromNumber+"%")
            for(let index in custom){
                if(custom[index].number == obj.input.context.dataset.number){
                    custom[index].ionrange_2 = obj.fromNumber
                }
            }

        }
    });
    $(".ionrange_3").ionRangeSlider({
        min: 0,
        max: 1000,
        type: "single",
        step: 1,
        postfix: "px",
        prettify: false,
        hasGrid: true,
        from: 120,
        onChange:function (obj) {
            $("#dropped_"+obj.input.context.dataset.number+"").find("img").css("height",obj.fromNumber+"px")
            for(let index in custom){
                if(custom[index].number == obj.input.context.dataset.number){
                    custom[index].ionrange_3 = obj.fromNumber
                }
            }
        }
    });
    $(".ionrange_4").ionRangeSlider({
        min: 0,
        max: 100,
        type: "single",
        step: 1,
        postfix: "px",
        prettify: false,
        hasGrid: true,
        from: 0,
        onChange:function (obj) {
            $("#dropped_"+obj.input.context.dataset.number+"").find("img").css("borderRadius",obj.fromNumber+"px")
            for(let index in custom){
                if(custom[index].number == obj.input.context.dataset.number){
                    custom[index].ionrange_4 = obj.fromNumber
                }
            }
        }
    });
}

function ThreeRows() {
    number = number+1
    order_num = order_num+1
    custom.push({number:number,order_num:order_num,type:3})
    for(let index in custom){
        if(custom[index].number == number){
            custom[index].ionrange_10 = 0
            custom[index].ionrange_7 = 100
            custom[index].ionrange_8 = 200
            custom[index].ionrange_9 = 0
            custom[index].ionrange_5 = 50
            custom[index].img = []
            var imgList1 = {imgNumber:1,imgeSrc:'',urlType:0,urlId:0,urlTitle:''}
            var imgList2 = {imgNumber:2,imgeSrc:'',urlType:0,urlId:0,urlTitle:''}
            var imgList3 = {imgNumber:3,imgeSrc:'',urlType:0,urlId:0,urlTitle:''}
            custom[index].img.push(imgList1)
            custom[index].img.push(imgList2)
            custom[index].img.push(imgList3)
        }
    }
    var html = ' <div class="form-group draggable dropped ui-draggable" id="dropped_'+number+'" data-number="'+number+'">\n' +
        '    <div style="height: 200px" class="giftCard">\n' +
        ' <div class="TheerListx" style="display: flex;justify-content: center">\n' +
        '    <img class="INfoImagey" style="width:100%; height: 100%; cursor: pointer" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2727869584,4075643637&fm=26&gp=0.jpg" alt="">\n' +
        '    </div>\n' +
        '    <div class="TheerListx" style="display: flex;\n' +
        '  flex-direction: column;\n' +
        '  justify-content: space-between;" class="">\n' +
        '    <img class="RightPadx" style="width:100%; margin: 0 auto; display: block; height: 50%; cursor: pointer" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2727869584,4075643637&fm=26&gp=0.jpg" alt="">\n' +
        '    <img class="RightPadx" style="width:100%; margin: 0 auto; display: block; height: 50%; cursor: pointer" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2727869584,4075643637&fm=26&gp=0.jpg" alt="">\n' +
        '    </div>\n' +
        '    </div>\n' +
        '    </div>'
    var img = $('#field_image').html()
    //隐藏所有
    $('#sortable_leve').find('div[class="level_number"]').css("display","none")
    var level = '<div class="level_number" style="width: 90%; position: relative" id="level_'+number+'" data-number="'+number+'">\n' +
        '<i style="position: absolute;right:-70px; top:-9px;font-size: 25px; cursor: pointer" class="fa fa-times LunboListClick"></i>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>上边距</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_10" data-number="'+number+'" ></div>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>宽度调试</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_7" data-number="'+number+'" ></div>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>高度调试</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_8" data-number="'+number+'"></div>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>图片边距</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_9" data-number="'+number+'"></div>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>圆角</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_5" data-number="'+number+'"></div>\n' +

        '                            <div id="level_numberBox_'+number+'">\n' +
        '<div style="background: #f8f8f8;padding: 10px;border-radius: 10px" class="form-group  row additional">\n' +
        '<div class=" col-sm-4" style="margin-top:.5em;">\n' +
        '      <img src="" onerror="this.src=\'./resource/images/nopic.jpg\'; this.title=\'图片未找到.\'" class="img-responsive img-thumbnail" width="150">\n' +
        '    </div>\n' +
        '<div class="col-sm-8">\n' +
        '                                <div style="margin-bottom: 20px;position: relative;" class="input-group m-b">\n' +
        '                                    <input style="flex:3" type="text" id="bannerUrl_'+number+'_'+1+'" value="" class="form-control" readonly>\n' +
        '                                    <span style="flex:1" class="input-group-btn"> <button type="button" class="btn btn-default" data-imgNumber="'+1+'" data-number="'+number+'" onclick="bannerUrlClick($(this))">选择链接</button> </span>\n' +
        '                                </div>\n' +
        '                              '+img+'      \n' +
        '                            </div>\n' +
        '                            <div class="hr-line-dashed"></div></div>\n' +
        '                            <div id="level_numberBox_'+number+'">\n' +
        '<div style="background: #f8f8f8;padding: 10px;border-radius: 10px" class="form-group  row additional">\n' +
        '<div class=" col-sm-4" style="margin-top:.5em;">\n' +
        '      <img src="" onerror="this.src=\'./resource/images/nopic.jpg\'; this.title=\'图片未找到.\'" class="img-responsive img-thumbnail" width="150">\n' +
        '    </div>\n' +
        '<div class="col-sm-8">\n' +
        '                                <div style="margin-bottom: 20px;position: relative;" class="input-group m-b">\n' +
        '                                    <input style="flex:3" type="text" id="bannerUrl_'+number+'_'+2+'" value="" class="form-control" readonly>\n' +
        '                                    <span style="flex:1" class="input-group-btn"> <button type="button" class="btn btn-default" data-imgNumber="'+2+'" data-number="'+number+'" onclick="bannerUrlClick($(this))">选择链接</button> </span>\n' +
        '                                </div>\n' +
        '                              '+img+'      \n' +
        '                            </div>\n' +
        '                            <div class="hr-line-dashed"></div></div>\n' +
        '                            <div id="level_numberBox_'+number+'">\n' +
        '<div style="background: #f8f8f8;padding: 10px;border-radius: 10px" class="form-group  row additional">\n' +
        '<div class=" col-sm-4" style="margin-top:.5em;">\n' +
        '      <img src="" onerror="this.src=\'./resource/images/nopic.jpg\'; this.title=\'图片未找到.\'" class="img-responsive img-thumbnail" width="150">\n' +
        '    </div>\n' +
        '<div class="col-sm-8">\n' +
        '                                <div style="margin-bottom: 20px;position: relative;" class="input-group m-b">\n' +
        '                                    <input style="flex:3" type="text" id="bannerUrl_'+number+'_'+3+'" value="" class="form-control" readonly>\n' +
        '                                    <span style="flex:1" class="input-group-btn"> <button type="button" class="btn btn-default" data-imgNumber="'+3+'" data-number="'+number+'" onclick="bannerUrlClick($(this))">选择链接</button> </span>\n' +
        '                                </div>\n' +
        '                              '+img+'      \n' +
        '                            </div>\n' +
        '                            <div class="hr-line-dashed"></div></div>\n' +
        '                            </div>\n' +
        '                        </div>'

    $('#sortable').append(html);
    $('#sortable_leve').append(level);


    $(".ionrange_10").ionRangeSlider({
        min: 0,
        max: 100,
        type: "single",
        step: 1,
        postfix: "px",
        prettify: false,
        hasGrid: true,
        from: 0,
        onChange:function (obj) {
            $("#dropped_"+obj.input.context.dataset.number+"").find('div[class="giftCard"]').css("margin-top",obj.fromNumber)
            for(let index in custom){
                if(custom[index].number == obj.input.context.dataset.number){
                    custom[index].ionrange_10 = obj.fromNumber
                }
            }

        }
    });
    $(".ionrange_8").ionRangeSlider({
        min: 0,
        max: 1000,
        type: "single",
        step: 1,
        postfix: "px",
        prettify: false,
        hasGrid: true,
        from: 200,
        onChange:function (obj) {
            $("#dropped_"+obj.input.context.dataset.number+"").find('div').css("height",obj.fromNumber+"px")
            for(let index in custom){
                if(custom[index].number == obj.input.context.dataset.number){
                    custom[index].ionrange_8 = obj.fromNumber
                }
            }
        }
    });
    $(".ionrange_9").ionRangeSlider({
        min: 0,
        max: 50,
        type: "single",
        step: 1,
        postfix: "%",
        prettify: false,
        hasGrid: true,
        from: 50,
        onChange:function (obj) {
            $("#dropped_"+obj.input.context.dataset.number+"").find('img[class="RightPadx"]').css("height",obj.fromNumber+"%")
            for(let index in custom){
                if(custom[index].number == obj.input.context.dataset.number){
                    custom[index].ionrange_9 = obj.fromNumber
                }
            }
        }
    });
    $(".ionrange_5").ionRangeSlider({
        min: 0,
        max: 100,
        type: "single",
        step: 1,
        postfix: "px",
        prettify: false,
        hasGrid: true,
        from: 0,
        onChange:function (obj) {
            $("#dropped_"+obj.input.context.dataset.number+"").find('img').css("borderRadius",obj.fromNumber+"px")
            for(let index in custom){
                if(custom[index].number == obj.input.context.dataset.number){
                    custom[index].ionrange_5 = obj.fromNumber
                }
            }
        }
    });
    $(".ionrange_7").ionRangeSlider({
        min: 0,
        max: 50,
        type: "single",
        step: 1,
        postfix: "%",
        prettify: false,
        hasGrid: true,
        from: 50,
        onChange:function (obj) {
            $("#dropped_"+obj.input.context.dataset.number+"").find('div[class="TheerListx"]').css("width",obj.fromNumber+"%")
            for(let index in custom){
                if(custom[index].number == obj.input.context.dataset.number){
                    custom[index].ionrange_7 = obj.fromNumber
                }
            }
        }
    });
}

$(document).on("click", ".TwoRowsClick", function () {
    // var obj = $(this).parent().parent()
    // $('#dropped_'+obj[0].dataset.number+'').remove()
    // obj.remove()
    // for(let index in custom){
    //     if(custom[index].number == obj[0].dataset.number){
    //         custom.splice(index,1)
    //     }
    // }

    var obj = $(this).parent().parent()
    $('#dropped_'+obj[0].dataset.number+'').css("display","none")
    obj.css("display","none")



    number = number+1
    order_num = order_num+1
    custom.push({number:number,order_num:order_num,type:2})
    for(let index in custom){
        if(custom[index].number == number){
            custom[index].ionrange_1 = 0
            custom[index].ionrange_2 = 100
            custom[index].ionrange_3 = 200
            custom[index].img = []
            var imgList1 = {imgNumber:1,imgeSrc:'',urlType:0,urlId:0,urlTitle:''}
            var imgList2 = {imgNumber:2,imgeSrc:'',urlType:0,urlId:0,urlTitle:''}
            custom[index].img.push(imgList1)
            custom[index].img.push(imgList2)
        }
    }
    var html = ' <div class="form-group draggable dropped ui-draggable" id="dropped_'+number+'" data-number="'+number+'">\n' +
        '   <div class="giftCard">\n' +
        '                                            <img style="width:50%; height: 120px; cursor: pointer" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2727869584,4075643637&fm=26&gp=0.jpg" alt="">\n' +
        '                                            <img style="width:50%; height: 120px; cursor: pointer" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2727869584,4075643637&fm=26&gp=0.jpg" alt="">\n' +
        '                                        </div>\n' +
        '        </div>'
    var img = $('#field_image').html()
    //隐藏所有
    $('#sortable_leve').find('div[class="level_number"]').css("display","none")
    var level = '<div class="level_number" style="width: 90%; position: relative" id="level_'+number+'" data-number="'+number+'">\n' +
        '<i style="position: absolute;right:-70px; top:-9px;font-size: 25px; cursor: pointer" class="fa fa-times LunboListClick"></i>\n' +
        '<div style="margin-bottom: 20px" class="">\n' +
        '                            <button type="button" class="btn btn-outline btn-default TwoRowsClick">两列</button>\n' +
        '                            <button style="margin-left: 20px" type="button" class="btn btn-outline btn-default ThreeRows"">三列11</button>\n' +
        '                        </div>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>上边距</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_1" data-number="'+number+'" ></div>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>宽度调试</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_2" data-number="'+number+'" ></div>\n' +
        ' <div class="m-b-sm m-t">\n' +
        '                            <small><strong>高度调试</strong></small>\n' +
        '                        </div>\n' +
        '                        <div class="ionrange_3" data-number="'+number+'"></div>\n' +
        '                            <divid="level_numberBox_'+number+'">\n' +
        '<div style="background: #f8f8f8;padding: 10px;border-radius: 10px; margin: 20px 0" class="form-group  row additional">\n' +
        '<div class=" col-sm-4" style="margin-top:.5em;">\n' +
        '      <img src="" onerror="this.src=\'./resource/images/nopic.jpg\'; this.title=\'图片未找到.\'" class="img-responsive img-thumbnail" width="150">\n' +
        '    </div>\n' +
        '<div class="col-sm-8">\n' +
        '                                <div style="margin-bottom: 20px;position: relative;" class="input-group m-b">\n' +
        '                                    <input style="flex:3" type="text" id="bannerUrl_'+number+'_'+1+'" value="" class="form-control" readonly>\n' +
        '                                    <span style="flex:1" class="input-group-btn"> <button type="button" class="btn btn-default" data-imgNumber="'+1+'" data-number="'+number+'" onclick="bannerUrlClick($(this))">选择链接</button> </span>\n' +
        '                                </div>\n' +
        '                              '+img+'      \n' +
        '                            </div>\n' +
        '                            <div class="hr-line-dashed"></div></div>\n' +
        '                            <div id="level_numberBox_'+number+'">\n' +
        '<div style="background: #f8f8f8;padding: 10px;border-radius: 10px" class="form-group  row additional">\n' +
        '<div class=" col-sm-4" style="margin-top:.5em;">\n' +
        '      <img src="" onerror="this.src=\'./resource/images/nopic.jpg\'; this.title=\'图片未找到.\'" class="img-responsive img-thumbnail" width="150">\n' +
        '    </div>\n' +
        '<div class="col-sm-8">\n' +
        '                                <div style="margin-bottom: 20px;position: relative;" class="input-group m-b">\n' +
        '                                    <input style="flex:3" type="text" id="bannerUrl_'+number+'_'+2+'" value="" class="form-control" readonly>\n' +
        '                                    <span style="flex:1" class="input-group-btn"> <button type="button" class="btn btn-default" data-imgNumber="'+2+'" data-number="'+number+'" onclick="bannerUrlClick($(this))">选择链接</button> </span>\n' +
        '                                </div>\n' +
        '                              '+img+'      \n' +
        '                            </div>\n' +
        '                            <div class="hr-line-dashed"></div></div>\n' +
        '                            </div>\n' +
        '                        </div>'

    $('#sortable').append(html);
    $('#sortable_leve').append(level);

    $(".ionrange_1").ionRangeSlider({
        min: 0,
        max: 100,
        type: "single",
        step: 1,
        postfix: "px",
        prettify: false,
        hasGrid: true,
        from: 0,
        onChange:function (obj) {
            $("#dropped_"+obj.input.context.dataset.number+"").find("img").css("margin-top",obj.fromNumber)
            for(let index in custom){
                if(custom[index].number == obj.input.context.dataset.number){
                    custom[index].ionrange_1 = obj.fromNumber
                }
            }

        }
    });
    $(".ionrange_2").ionRangeSlider({
        min: 0,
        max: 50,
        type: "single",
        step: 1,
        postfix: "%",
        prettify: false,
        hasGrid: true,
        from: 50,
        onChange:function (obj) {
            $("#dropped_"+obj.input.context.dataset.number+"").find("img").css("width",obj.fromNumber+"%")
            for(let index in custom){
                if(custom[index].number == obj.input.context.dataset.number){
                    custom[index].ionrange_2 = obj.fromNumber
                }
            }

        }
    });
    $(".ionrange_3").ionRangeSlider({
        min: 0,
        max: 1000,
        type: "single",
        step: 1,
        postfix: "px",
        prettify: false,
        hasGrid: true,
        from: 200,
        onChange:function (obj) {
            $("#dropped_"+obj.input.context.dataset.number+"").find("img").css("height",obj.fromNumber+"px")
            for(let index in custom){
                if(custom[index].number == obj.input.context.dataset.number){
                    custom[index].ionrange_3 = obj.fromNumber
                }
            }
        }
    });
})
